<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>武汉理工大学出版社-新闻动态</title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/page_div.css">
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js"></script>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<!-- 头部 -->
		<div id="header"></div>
		
		<div id="bootstrap"></div>
		
		<div class="live" id="app">
			<ul class="live_ul">
				<li v-for="item,index in newsList" :style="{'padding-top':index==0?'0':''}" >
					<img :src="imgUrl+item.img" v-if="item.img" @click="openRemark(item.remark)">
					<div class="content" @click="onDetails(item.id)">
						<p class="title">{{item.title}}</p>
						<p class="summary">{{item.subTitle}}</p>
						<p class="source_time">
							<span>来源：{{item.source}}</span>
							<span>时间：{{item.publishTime}}</span>
						</p>
					</div>
				</li>
			</ul>
			
			<div v-cloak class="app">
			  <div v-show="total >= 1" class="pageContainer">
			    <ul class="pagesInner">
<!--			      <li class="page" @click="prevOrNext(-1)"><span aria-hidden="true">&lt;</span></li>-->
			      <li class="page" v-for="(item, index) in pages" :key="index" :class="{actived: item == pageIndex}" @click="selectPage(item)">
			        <span>{{item}}</span>
			      </li>
<!--			      <li class="page" @click="prevOrNext(1)"><span class="fa fa-chevron-right" aria-hidden="true">&gt;</span></li>-->
			    </ul>
			    共{{total}}页&nbsp;转到第&nbsp;
			      <input type="text" v-model="goToPage" class="totalinput">
			    &nbsp;页&nbsp;
			    <button @click="handleGoToPage">GO</button>
			  </div>
			</div>
			
			<!-- 加载中 -->
			<div class="load_page" v-show="isLoadingShow">
				<div class="content">
					<div class="item">
						<i class="loader --1"></i>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部 -->
		<div id="footer"></div>

	</body>
	
	<script>
		const App = {
			data() {
				return {
					pageIndex: 1,
					pageSize: 10,
					goToPage: '',
					total:1,
					imgUrl:'http://dbs.wutp.com.cn/CM-API',
					newsList:[],
					isLoadingShow:false
				}
			},
			computed: {
			  pages: function () {
			    // 每次最多显示5个页码
			    var c = this.pageIndex
			    var t = this.total
			    var p = []
			    for (var i = 1; i <= t; i++) {
			      p.push(i)
			    }
			    var l = p.length
			    if (l <= 5) { // 总页数<=5，显示全部页码
			      return p
			    } else if (l > 5 && c <= 4) { // 总页数>5 && 当前页面<=3
			      return [1, 2, 3, 4, 5,'...', '尾页']
			    } else if (l > 5&& c > 4 && c <= l - 3) { // 总页数 > 5 && 当前页面 > 3 && 当前页 < 总页数 - 3
					return [c - 3, c - 2, c - 1, c, c + 1,  '...', '尾页']
			    } else { // 总页数 > 5 && 当前页面 > 3 && 当前页 > 总页数 - 3
					debugger
			      return [ '首页',t - 3, t - 2, t - 1,t ]
			    }
			  },
			},
			mounted(){
				sessionStorage.setItem('href',window.location.href);
				this.getNews();
			},
			methods:{
				onDetails(id){
					let hrefs = window.location.href;
					 window.location.href="details.html?name=XXDT&id="+id+'&href='+hrefs;
				},
				openRemark(remark){
					if(remark){
						// window.location.href = remark
						window.open(remark)
					}
				},
				// 我的新闻动态
				async getNews(){
					let that = this;
					that.isLoadingShow = true
					const orderParam={order_no: false}
					await axios({
						method:"get",
						url:"http://dbs.wutp.com.cn/CM-API/homePageApi/getNews?pageNum="+that.pageIndex+"&pageSize="+that.pageSize,
						params: {orderParam:orderParam},
					}).then(function (res) {
						that.newsList = res.data.data.content;
						
						// 总条数除以10并向上取整得到总页数
						const total = res.data.data.total / that.pageSize;
						that.total = Math.ceil(total);
						// that.total = res.data.data.total;
						that.pageIndex = res.data.data.pageNum;
						that.pageSize = res.data.data.pageSize;
						that.isLoadingShow = false
					})
				},
				prevOrNext: function(n) {
					this.pageIndex += n
					this.pageIndex <= 1 ? this.pageIndex = 1 : this.pageIndex > this.total ? this.pageIndex = this.total : null
					this.getNews();
				},
				selectPage: function(n) {
					if(n=='尾页'){
						n = this.total
					}
					if(n=='首页'){
						n = 1
					}
					if (n === this.pageIndex) return
					if (typeof n === 'string') return
					this.pageIndex = n;
					this.getNews();
				},
				handleGoToPage: function() {
					this.pageIndex = this.goToPage <= 1 ? 1 : this.goToPage - 0 >= this.total - 0 ? this.total :
							this.goToPage
					this.goToPage = this.pageIndex;
					this.getNews();
				},
			}
		};
		Vue.createApp(App).mount('#app');
	</script>
	
	<style>
		.cur {
		    background-color: #ae0e16 !important;
		    height: 100%;
		}
		.live {
			margin: 0 3rem;
			padding: 0.06rem 0;
		}
		.live .live_ul li {
			display: flex;
			align-items: center;
			border-bottom: 0.01rem solid #eaeaea;
			padding: 0.2rem 0;
			cursor: pointer;
		}
		.live .live_ul li img{
			width: 3rem;
			height: 2rem;
			margin-right: 0.3rem;
		}
		.live .live_ul li .content{
			flex: 1;
		}
		.live .live_ul li .content .title{
			font-size: 0.24rem;
			margin-bottom: 0.2rem;
			letter-spacing: 0.01rem;
			line-height: 0.4rem;
		}
		.live .live_ul li .content .summary{
			font-size: 0.14rem;
			letter-spacing: 0.01rem;
			margin-bottom: 0.22rem;
			color: #555;
		}
		.live .live_ul li .content .source_time span{
			font-size: 0.14rem;
			letter-spacing: 0.01rem;
			color: #999;
			margin-right: 0.2rem;
		}
		
	</style>
</html>
